<template>
	<div>
		<Row class="content-search" style="padding-right: 20px; margin-bottom: 50px;height: 30px;line-height: 30px">
			<Col span="2" style="text-align: center;">名称：</Col>
			<i-col span="5">
				<Input type="text" v-model="search.process_name" placeholder="请输入名称"></Input>
			</i-col>
			<Col span="2" style="text-align: center;">创建人：</Col>
			<i-col span="5">
				<Input type="text" v-model="search.creator" placeholder="请输入创建人"></Input>
			</i-col>
			<Col span="2" style="text-align: center;">创建时间：</Col>
			<i-col span="8">
				<Col span="11" style="text-align: center;"><Date-picker v-model="search.starttime" type="date" :options="options1" placeholder="请选择开始时间"></Date-picker></Col>
				<Col span="2" style="text-align: center;">至</Col>
				<Col span="11" style="text-align: center;"><Date-picker v-model="search.endtime" type="date" :options="options1" placeholder="请选择结束时间"></Date-picker></Col>
			</i-col>
			<div class="pull-right" style="margin-top: 10px;min-width: 200px;">
				<Button type="primary" icon="plus" size="small" @click="newFlow" style="margin-right: 10px;">新建工作流</Button>
				<Button type="primary" icon="ios-search" size="small" @click="getFlow">搜索</Button>
			</div>
		</Row>

		<Card style="margin-top:20px">
			<span slot="title">工作流列表</span>
			<Table border :context="self" :columns="flowTitle" :data="flowList"></Table>
			<Page :total="page.dataLength" :page-size="page.pagesize" @on-change="getCurrentPage" @on-page-size-change="getPageSize" show-total show-elevator show-sizer style="margin-top: 20px;"></Page>
		</Card>

		<Modal v-model="alert.newone" title="新建工作流">
			<Form ref="formFlow" :model="formFlow" :rules="ruleValidate" :label-width="70">
				<Form-item label="类别" prop="sort">
					<Select v-model="formFlow.sort" placeholder="请选择">
						<Option value="value1">日常工作</Option>
						<Option value="value2">部门通知</Option>
					</Select>
				</Form-item>
				<Form-item label="名称" prop="name">
					<Input v-model="formFlow.name" placeholder="请输入"></Input>
				</Form-item>
				<Form-item label="流程key" prop="key">
					<Input v-model="formFlow.key" placeholder="请输入"></Input>
				</Form-item>
				<Form-item label="描述" prop="textarea">
					<Input v-model="formFlow.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
				</Form-item>
			</Form>
			<div slot="footer">
				<i-button type="ghost" @click="cancel('formFlow')">取消</i-button>
				<i-button type="primary" @click="submit('formFlow')">提交</i-button>
			</div>
		</Modal>
		
		<Modal v-model="alert.flow" title="title">
			<p></p>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				self: this,
				alert: {
					newone: false,
					flow: false
				},
				page: {
					dataLength: 0,
					currentpage: 1,
					pagesize: 10
				},
				search: {},
				flowList: [{
					sort: '日常工作',
					name: '部门通知',
					version: '',
//					createtime:'20160507',
					updatetime: '20170207',
					founder: 'admin'
				},{
					sort: '费用相关',
					name: '还款流程',
					version: '',
//					createtime:'20160327',
					updatetime: '20160401',
					founder: 'qwe'
				}],
				//				工作流列表
				flowTitle: [{
						title: '类别',
						key: 'process_type',
						ellipsis: true,
						width: 200
					},
					{
						title: '名称',
						key: 'process_name',
						ellipsis: true,
						width: 200
					},
					{
						title: '版本',
						key: 'version',
						ellipsis: true,
						width: 220
					},
					{
						title: '流程key',
						key: 'process_key',
						ellipsis: true,
						width: 220
					},
					{
						title: '创建人',
						key: 'creator',
						ellipsis: true,
						width: 220
					},
					{
						title: '创建时间',
						key: 'create_time',
						ellipsis: true,
						width: 220
					},
//					{
//						title: '更新时间',
//						key: 'create_time',
//						ellipsis: true,
//						width: 220
//					},
					//					{
					//						title: '操作类型',
					//						key: 'state',
					//						align: 'center',
					//						fixed: 'right',
					//						width: 140,
					//						render(row, column, index) {
					//							const color = row.state == 1 ? 'blue' : row.state == 2 ? 'blue' : row.state == 3 ? 'blue' : 'blue';
					//							const text = row.state == 1 ? '删除' : row.state == 2 ? '添加' : row.state == 3 ? '更新' : '登陆';
					//							return `<tag type="border" color="${color}">${text}</tag>`;
					//						}
					//					},
					{
						title: '操作',
						key: 'action',
						align: 'center',
						fixed: 'right',
						width: 260,
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="bound">绑定</i-button>  <i-button type="primary" size="small" @click="sets">流程设置</i-button>  <i-button type="primary" size="small" @click="">修改</i-button>  <i-button type="error" size="small" @click="deleteFlow(${index})">删除</i-button> `;
						}
					}
				],
				formFlow:{},//新建工作流model
				ruleValidate: {
					sort: [
						{ required: true, message: '请选择类别', trigger: 'change' }
					],
					name: [
						{ required: true, message: '名称不能为空', trigger: 'blur' }
					],
					key: [
						{ required: true, message: 'key值不能为空', trigger: 'blur' }
					],
					textarea: [
//						{ required: true, message: '请输入消息详情', trigger: 'blur' },
//						{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
					],
				},
				//日期
				options1: {
					shortcuts: [{
							text: '今天',
							value() {
								return new Date();
							},
							onClick: (picker) => {
								this.$Message.info('点击了今天');
							}
						},
						{
							text: '昨天',
							value() {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24);
								return date;
							},
							onClick: (picker) => {
								this.$Message.info('点击了昨天');
							}
						},
						{
							text: '一周前',
							value() {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
								return date;
							},
							onClick: (picker) => {
								this.$Message.info('点击了一周前');
							}
						}
					]
				},
			}
		},

		mounted() {
			this.getFlow();
		},

		methods: {
			//分页
			getCurrentPage(val) {
				this.page.currentpage = val;
				this.getFlow();
			},
			getPageSize(val) {
				this.page.pagesize = val;
				this.getFlow();
			},
			change() {

			},
			//搜索
			getFlow() {
				let that = this;
				if(that.search.process_name == undefined || that.search.process_name == null) {
					that.search.process_name = ''
				}
				if(that.search.creator == undefined || that.search.creator == null) {
					that.search.creator = ''
				}
				if(that.search.starttime == undefined || that.search.starttime == null) {
					that.search.starttime = ''
				}
				if(that.search.endtime == undefined || that.search.endtime == null) {
					that.search.endtime = ''
				}
				let obj = {
					process_name : that.search.process_name,
					creator : that.search.creator,
					starttime : that.search.starttime,
					endtime : that.search.endtime,
					pageNo : that.page.currentpage,
					pageSize : that.page.pagesize
				}
				console.log(obj)
//				if(obj.starttime!=""&&obj.endtime!=""&&obj.starttime.replace(/-/g, "/") >= obj.endtime.replace(/-/g, "/")){
//					console.log(123);
//				}
				that.$http.post("http://192.168.1.169:8084/searchByCondition",obj).then(response => {
					let isOk = response.data;
					if(isOk.flag) {
						if(isOk.obj != null) {
							that.flowList = isOk.obj.processPage;
							that.page.dataLength = isOk.obj.totalSize
						} else if(isOk.obj == null) {
							that.flowList = [];
							that.page.dataLength = 0;
						};
					} else {
						that.flowList = [];
						that.page.dataLength = 0;
						that.$Message.warning(response.data.message);
					}
				}, response => {

				});
			},
			//新建工作流
			newFlow(){
				this.alert.newone = true;
			},
			//新建工作流提交
			submit(name) {
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$Message.success('提交成功!');
						this.alert.formFlow = false;
						this.newone = {}
					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			},
			//新建工作流取消
			cancel(name) {
				this.alert.newone = false;
				this.formFlow = {}
				this.$refs[name].resetFields();
			},
			//绑定
			bound(){
				this.alert.flow = true;
			},
			//设置
			sets(){
				this.alert.flow = true;
			},
			//删除工作流
			deleteFlow(index) {
				this.flowList.splice(index,1);
			},
		}
	}
</script>